<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>两数求和示例</title>
    <style>
        /* 简单设置页面整体的样式，让元素排列更整齐美观 */
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        input {
            margin-bottom: 10px;
            padding: 5px;
            width: 100px;
        }

        button {
            padding: 5px 10px;
            background-color: #007bff;
            color: white;
            border: none;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <!-- 创建一个用于输入第一个数字的文本框 -->
    <input type="number" id="num1" placeholder="请输入第一个数">
    <!-- 创建一个用于输入第二个数字的文本框 -->
    <input type="number" id="num2" placeholder="请输入第二个数">
    <!-- 创建一个按钮，点击它来触发求和计算操作 -->
    <button id="resultBtn">结果</button>
    <!-- 创建一个用于显示计算结果的元素 -->
    <div id="resultDiv"></div>

    <script>
        // 获取页面中的“结果”按钮元素，通过id属性来查找
        const resultBtn = document.getElementById('resultBtn');
        // 获取用于显示结果的div元素
        const resultDiv = document.getElementById('resultDiv');

        // 为“结果”按钮添加点击事件监听器，当按钮被点击时会执行后面的函数
        resultBtn.addEventListener('click', function () {
			debugger
            // 获取第一个输入框中用户输入的值，通过id找到元素后获取其value属性
            const num1 = document.getElementById('num1').value;
            // 获取第二个输入框中用户输入的值
            const num2 = document.getElementById('num2').value;

            // 使用JavaScript的parseFloat函数将获取到的字符串类型的值转换为数字类型（因为输入框获取的值默认是字符串）
            const number1 = parseFloat(num1);
            const number2 = parseFloat(num2);

            // 计算两个数字的和
            const sum = number1 + number2;

            // 将计算结果显示在页面的resultDiv元素中，通过修改其innerHTML属性来设置显示的内容
            resultDiv.innerHTML = `两数之和为：${sum}`;
        });
    </script>
</body>

</html>